import { RootState } from '@/types/store'
import { useDispatch, useSelector } from 'react-redux'
import ArticleItem from '../ArticleItem'
import { InfiniteScroll, PullToRefresh } from 'antd-mobile'

import styles from './index.module.scss'
// import { useHistory } from 'react-router'
import { getArticleList, getNewArticle } from '@/store/action/home'
type Props = {
  channelId: number
}
const ArticleList = ({ channelId }: Props) => {
  const dispatch = useDispatch()
  // const history = useHistory()

  const channelArticles = useSelector(
    (state: RootState) => state.home.articleList
  )
  const { articles = [], timestamp } = channelArticles[channelId] || {}

  const hasMore = timestamp !== null
  const loadMore = async () => {
    await dispatch(getArticleList(channelId, timestamp || Date.now()))
  }

  const onRefresh = async () => {
    await dispatch(getNewArticle(channelId, Date.now()))
  }
  return (
    <div className={styles.root}>
      <PullToRefresh onRefresh={onRefresh}>
        {/* 文章列表中的每一项 */}
        {articles.map((item, index) => (
          <div
            className="article-item"
            key={item.art_id}
            // onClick={() => history.push(`/article/${item.art_id}`)}
          >
            <ArticleItem article={item} />
          </div>
        ))}
        {/* 无限滚动 */}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore}></InfiniteScroll>
      </PullToRefresh>
    </div>
  )
}

export default ArticleList
